feat(aio): each doc can add/remove class to aio-shell with <aio-context> #16564
Conversation
wardbell
added
comp: aio
action: review
closes angular#16549 Supports doc-specific styling of the entire shell based on the context of the current document. Also adds the “marketing” class if the docId indicates the doc is neither a guide nor tutorial page.
There was a problem hiding this comment.
I fear that this kind of change will be a pain to maintain and will be even more of an issue if we wanted to make the project reusable.
We are hard coding data, like guide and tutorial into the AppComponent, hidden inside application code.
Also we are adding a new undocumented feature of an <aio-context> tag, which is also hidden inside the application code. While it seems simple to do it this way, it doesn't fit with the general architecture of the app. If anything I would have expected it to be an embeddedComponent, similar to what we used to have to set the title from the content.
Could we not extend the feature that sets the pageId and assign that value to a class on the <aio-shell> tag? This would keep the application clean of hardcoded values; it would just put the burden of the styling on the CSS to capture all these classes because they would be different for each page.
… styling Alternative to angular#16564 Closes angular#16549
… styling Alternative to angular#16564 Closes angular#16549
… styling Alternative to angular#16564 Closes angular#16549
|
Closing for now. |
… styling Alternative to angular#16564 Closes angular#16549
… styling Alternative to angular#16564 Closes angular#16549
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
closes #16549
Supports doc-specific styling of the entire shell based on the context of the current document.
Also adds the “marketing” class if the docId indicates the doc is neither a guide nor tutorial page.
Add something like the following near the top (or at the top) of the
.md(or.html) file.If it’s a guide or tutorial page ('guide/...' or 'tutorial/...'), this PR's changes will copy the classes up and you’ll see
<aio-shell class="foo bar">. Otherwise you'll see<aio-shell class="marketing foo bar">.Please check if the PR fulfills these requirements